<html>
    <head>
        <title>地址栏闪烁</title>
        <script type="text/javascript">
            var isShine = true;
            //Chrome/FireFox
            window.onfocus = function () {
                isShine = false;
            };
            window.onblur = function () {
                isShine = true;
            };

            //IE
            document.onfocusin = function () {
                isShine = false;
            };
            document.onfocusout = function () {
                isShine = true;
            };

            // debugger;
            // 保存原始title，便于还原
            var defaultTitle = document.title
            setInterval(function () {
                var title = document.title;
                //判断是否获取焦点
                if (isShine == true) {
                    //如果没有获取焦点就判断名称是否包含未读消息
                    if (/未读消息/.test(title) == false) {
                        //如果包含就显示为空
                        document.title = '【未读消息】';
                    } else {
                        //否则显示未读消息，间隔0.5秒实现闪烁
                        document.title = '【　　　　　】';
                    }
                } else {
                    //如果获取到焦点就不闪烁，使用元素标题
                    document.title = defaultTitle;
                }
            }, 500);
        </script>
    </head>
    <body>
        测试浏览器标题栏闪烁
        <button id="btn">消息</button>
    </body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        function showNotification() {
            //判断浏览器是否支持Notification对象
            // debugger;
            var isFocus = true;
            //Chrome/FireFox
            window.onfocus = function () {
                isFocus = true;
            };
            
            window.onblur = function () {
                isFocus = false;
            };

            //IE
            document.onfocusin = function () {
                isFocus = true;
            };
            document.onfocusout = function () {
                isFocus = false;
            };

            if (window.Notification) {
                $("#btn").on('click', function () {
                    console.log('aaa')
                    if (!isFocus) {
                        //判断是否有权限显示通知
                        if (Notification.permission == "granted") {
                            pushNotice();
                        } else if (Notification.permission != "denied") {
                            //如果不是拒绝显示通知就请求允许显示通知
                            Notification.requestPermission(function (permission) {
                                pushNotice();
                            });
                        }
                    }
                });
            } else {
                $.alert({title: '信息', content: '浏览器不支持桌面通知'});
            }
        }

        function pushNotice() {
            //判断是否有显示通知的权限
            if (Notification.permission == "granted") {
                //初始化通知对象
                var options = {
                    body: "您有新的未读消息"
                }
                var notice = new Notification("通知", options);
            }
        }
        showNotification();
        
    </script>
</html>